<template>
  <div class="container-big">
    <wechat-mask />
    <div style="padding-bottom: 336px;" class="container">
      <banner />
      <ticketIntroduce v-if="!$store.state.buyTicket.noSale&&!$store.state.buyTicket.ifShowTicketKnow" />
      <ticketKnow v-if="$store.state.buyTicket.ifShowTicketKnow" />
      <div v-for="(item, index) of $store.state.buyTicket.ticketList" v-show="ticketState&&$store.state.buyTicket.noSale&&!$store.state.buyTicket.ifShowTicketKnow" :key="index" class="buyTicket-box">
        <buyTicket v-for="(ticket, ind) of item.body" :key="ind" :ticket="ticket" />
      </div>
    </div>
    <div :class="{'nobag':showGoodsLayer}" class="screen-fixed-box cenCen ">
      <div style="background: #313339;" v-if="ticketState" class="goods-box cenBet">
        <div v-show="showGoodsLayer" @click.self="showGoodsLayer=false" class="goodsLayer-box-bag"></div>
        <div v-show="showGoodsLayer" class="goodsLayer-box">
          <transition name="goodsLayer">
            <goodsLayer v-show="showGoodsLayer" />
          </transition>
        </div>
        <div v-if="$store.state.buyTicket.soldOut" class="no-ticket">
          已售罄
        </div>
        <div v-if="!$store.state.buyTicket.soldOut" class="goods cenCen" @click="showGoodsLayer=!showGoodsLayer">
          <car v-if="$store.state.buyTicket.noSale" />
          <noSale v-if="!$store.state.buyTicket.noSale&&!$store.state.buyTicket.ifShowTimeDown" />
          <ticketNum v-if="$store.state.buyTicket.noSale" />
          <timeDown v-if="!$store.state.buyTicket.noSale&&$store.state.buyTicket.ifShowTimeDown" />
        </div>
        <reminderSale v-if="!$store.state.buyTicket.noSale&&$store.state.buyTicket.surplusData>3600" />
        <subOrder v-if=" !$store.state.buyTicket.soldOut&&$store.state.buyTicket.noSale" />
        <promptAlert />
        <!-- <alert /> -->
      </div>
    </div>
    <groupBuying v-if="$store.state.buyTicket.groupBuyingAlert" />
    <ticketExplain v-if="$store.state.buyTicket.getTicketState.ticketDescription" />
  </div>
</template>
<script>
// 接口服务
import buyTicketService from "./../../api/buyTicketService.js";

import wechatMask from "@/components/wechat-mask";
import banner from "./assembly/banner/banner";

// 购物车部分组件
import car from "./assembly/goodsCar/car"; //购物车组件
import noSale from "./assembly/goodsCar/noSale"; //暂未开售组件
import ticketNum from "./assembly/goodsCar/ticketNum"; //购买票的数量组件
import timeDown from "./assembly/goodsCar/timeDown"; //倒计时组件
import reminderSale from "./assembly/goodsCar/reminderSale"; //开售提醒组件
import subOrder from "./assembly/goodsCar/subOrder"; //提交订单组件
import promptAlert from "./assembly/goodsCar/prompt"; //prompt弹框
// import alert from "./assembly/goodsCar/alert"; //alert弹框
import groupBuying from "./assembly/groupBuying"; //团购票选择弹框

// 票品介绍部分页面
import ticketIntroduce from "./assembly/ticketIntroduce/ticketIntroduce"; // 票品介绍部分页面

// 购票须知部分页面
import ticketKnow from "./assembly/ticketKnow/ticketKnow"; //购票须知部分页面
import ticketExplain from "./assembly/ticketKnow/ticketExplain"; //门票说明

// 购物车浮层
import goodsLayer from "./assembly/goodsLayer/goodsLayer"; //购物车浮层部分页面

// 买票到购物车
import buyTicket from "./assembly/buyTicket/buyTicket"; //购物车浮层部分页面

import { getLinkId } from "./../publicJs/getLinkId.js"; // 得到url 参数getLinkId并且赋值

import { getSurplusData } from "./../publicJs/getSurplusData.js"; //剩余时间 开售时间-当前时间=剩余时间的毫秒数
import foldUp from "@/api/invoice";

export default {
  components: {
    car,
    noSale,
    buyTicket,
    ticketNum,
    timeDown,
    reminderSale,
    subOrder,
    ticketIntroduce,
    goodsLayer,
    ticketKnow,
    ticketExplain,
    promptAlert,
    // alert,
    banner,
    wechatMask,
    groupBuying
  },
  data() {
    return {
      ticketState: false, //状态是否获取到
      showGoodsLayer: false //展示购物车
    };
  },
  created() {
    this.initFun();
  },
  methods: {
    async initFun() {
      let res = await getLinkId();
      this.getTicketList();
      // 解决回退页面时候会清空购物车数据问题
      if (this.$store.state.buyTicket.carTicketList.length == 0) {
        this.getCarTicketList();
      }
    },
    // 得到购票的状态，
    async getTicketState() {
      buyTicketService
        .getTicketState(
          this.$store.state.buyTicket.corpId,
          this.$store.state.buyTicket.activityId
        )
        .then(res => {
          if (res.success) {
            this.ticketState = true;
            this.foldUp();
            getSurplusData(this.$store.state.buyTicket.surplusData || 0);
          } else {
            this.ticketState = false;
            // this.$toast(res.errorMsg);
          }
        });
    },
    // 得到门票列表
    async getTicketList() {
      this.$store.state.loading = true;
      let linkId =
        this.$store.state.buyTicket.linkId ||
        sessionStorage.getItem("linkIdUcan") ||
        "";
      buyTicketService.getTicketList(linkId).then(res => {
        this.$store.state.loading = false;
        if (res.success) {
          this.getTicketState();
          // this.$store.state.buyTicket.ticketList = res.result;
        } else {
          // this.$toast(res.errorMsg);
        }
      });
    },
    // 获取折上折
    async foldUp() {
      // // 进行从小到大排序 下面确定几折也方便
      // let foldUp = [
      //   {
      //     activityId: 23,
      //     corpId: "ding42d297c548f1006335c2f4657eb6378f",
      //     discount: 0.8,
      //     discountNum: 5,
      //     gmtCreate: 1559119658000,
      //     gmtModified: 1559119658000,
      //     id: 5,
      //     isDel: 0,
      //     ticketTypeIds: "[50,55,56]"
      //   },
      //   {
      //     activityId: 23,
      //     corpId: "ding42d297c548f1006335c2f4657eb6378f",
      //     discount: 0.6,
      //     discountNum: 10,
      //     gmtCreate: 1559119658000,
      //     gmtModified: 1559119658000,
      //     id: 6,
      //     isDel: 0,
      //     ticketTypeIds: "[50,55,56]"
      //   },
      //   {
      //     activityId: 23,
      //     corpId: "ding42d297c548f1006335c2f4657eb6378f",
      //     discount: 0.7,
      //     discountNum: 6,
      //     gmtCreate: 1559119658000,
      //     gmtModified: 1559119658000,
      //     id: 6,
      //     isDel: 0,
      //     ticketTypeIds: "[50,55,56]"
      //   }
      // ];
      // let min = {};
      // for (let i = 0; i < foldUp.length; i++) {
      //   for (let j = i; j < foldUp.length; j++) {
      //     if (foldUp[i].discountNum > foldUp[j].discountNum) {
      //       min = foldUp[j];
      //       foldUp[j] = foldUp[i];
      //       foldUp[i] = min;
      //     }
      //   }
      // }
      // this.$store.state.buyTicket.foldUp = foldUp;
      // sessionStorage.setItem("foldUp", JSON.stringify(foldUp)); //本地存储一下，防止刷新导致数据丢失
      // console.log(this.$store.state.buyTicket.foldUp);
      // return;
      const res = await foldUp.foldUp({
        activityId: this.$store.state.buyTicket.activityId
      });
      if (res.success) {
        // 进行从小到大排序 下面确定几折也方便
        let foldUp = res.result || [];
        let min = {};
        for (let i = 0; i < foldUp.length; i++) {
          for (let j = i; j < foldUp.length; j++) {
            if (foldUp[i].discountNum > foldUp[j].discountNum) {
              min = foldUp[j];
              foldUp[j] = foldUp[i];
              foldUp[i] = min;
            }
          }
        }
        this.$store.state.buyTicket.foldUp = foldUp;
        sessionStorage.setItem("foldUp", JSON.stringify(foldUp)); //本地存储一下，防止刷新导致数据丢失
        console.log(this.$store.state.buyTicket.foldUp);
      }
    },
    // 得到购物车中的票列表数据
    async getCarTicketList() {
      buyTicketService.getCarTicketList().then(res => {
        // if (res.success) {
        // } else {
        //   // this.$toast(res.errorMsg);
        // }
      });
    }
  }
};
</script>

<style>
/* 南方购票部分的公共css ，因为引入有问题，所以先放这里 */
/* 底部购物车等 */
.goods-box {
  z-index: 9;
  width: 100%;
  height: auto;
  padding: 0px;
  min-height: 110px;
  background: #35383f;
  box-shadow: 0 -10px 17px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}
/* 左边的功能容器 */
.goods {
  width: auto;
  height: 100%;
  position: relative;
  padding-left: 20px;
}

/* 提交按钮 */
.submit-btn {
  width: auto;
  height: auto;
  min-height: 110px;
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
  /* font-family: PingFangSC-Regular; */
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
  min-width: 260px;
  cursor: pointer;
}

.submit-btn > div {
  color: #eeeeee;
}

.submit-btn:active {
  opacity: 0.6;
}

/* 已售罄 */
.no-ticket {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  /* font-family: PingFangSC-Regular; */
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
}

/* 购物车内容部分 */
.goodsLayer-box-bag {
  position: fixed;
  left: 0px;
  bottom: 110px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.46);
}
.goods-con-box {
  width: auto;
  height: auto;
  text-align: left;
  margin: 0px 0px 0px 10px;
}

.goods-con-tit {
  width: auto;
  height: auto;
  font-size: 26px;
  color: #ebecec;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
}

.goods-con-con {
  width: auto;
  height: auto;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
  padding: 3px 3px 3px 0px;
  font-size: 20px;
  color: #ebecec;
}
/* 购物车清单 */

.goodsLayer-box {
  width: 100%;
  height: auto;
  max-height: 800px;
  overflow-y: auto;
  min-height: 300px;
  position: absolute;
  left: 0px;
  bottom: 110px;
  /* width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.46);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end; */
}
.goodsLayer-enter-active,
.goodsLayer-leave-active {
  transition: all 0.5s ease;
}
.goodsLayer-enter,
.goodsLayer-leave-active {
  transform: translateY(1160px);
}
/* 买票部分 */
.buyTicket-box {
  width: 100%;
  height: auto;
  padding: 0px 5%;
  margin-top: 16px;
}
.nobag {
  background: rgba(0, 0, 0, 0.46);
}
</style>
